<template>
    <div class="FreeAtlasDetails" :style="{ fontSize: showEdition ? '14px' : '20px' }">
      <div class="top3">
        <div class="top" v-if="AtlasData">
          <!-- <img v-if="getDataTable.suolueFileId" width="100%" :src="baseurlid + getDataTable.suolueFileId" alt />
          <img v-else width="100%" :src="baseurlid + getDataTable.fileUrl" alt />
          <img width="100%" v-if="!getDataTable.suolueFileId" src="https://nfzjszlb.jst.zj.gov.cn/tyzcpt/api/upload/oss/preview?fileId=3e7acb97b640411a9ce06017e7c12964" alt="" /> -->
          <span style="border-right: 4px solid blue; margin:0  10px"></span>
          <span style="font-size: 16px; font-weight: 800; color: #000">图集基本信息</span>
          <p class="top1" style="font-size: 16px; font-weight: 800; color: #000">
            {{ AtlasData.atlasName }}
          </p>
          <p class="top1">NO 编号：{{ AtlasData.id }}</p>
          <div class="topBottom">
            <div class="left">
              <p style="font-size: 14px; font-weight: 800; color: #000">
                {{ AtlasData.atlasStyle }}
              </p>
              <p>风格</p>
            </div>
            <div class="middle1">
              <p style="font-size: 14px; font-weight: 800; color: #000">{{ AtlasData.floors }}层</p>
              <p>楼层</p>
            </div>
            <div class="right">
              <p style="font-size: 14px; font-weight: 800; color: #000">{{ Number(AtlasData.buildArea).toFixed(2) }}㎡</p>
              <p>面积</p>
            </div>
          </div>
          <div class="topBottom">
            <div class="left">
              <p style="font-size: 14px; font-weight: 800; color: #000">
                {{ AtlasData.belongArea || '暂无数据' }}
              </p>
              <p>所属区域</p>
            </div>
            <div class="middle1">
              <p style="font-size: 14px; font-weight: 800; color: #000">{{ AtlasData.useNumber ? AtlasData.useNumber : 0 }}次</p>
              <p>使用量</p>
            </div>
            <div class="right">
              <p style="font-size: 14px; font-weight: 800; color: #000">{{ AtlasData.praiseNum ? AtlasData.praiseNum : 0 }}次</p>
              <p>点赞量</p>
            </div>
          </div>
        </div>
        <div class="middle"></div>
        <div class="bottom2">
          <span style="border-right: 4px solid blue; margin-right: 10px"></span>
          <span style="font-size: 16px; font-weight: 800; color: #000">图集详情</span
          ><span style="position: relative; left: 236px; top: -2px"><van-button type="primary" size="small" @click="handleG0toPDF(getDataTable)">预览pdf</van-button></span>
          <div style="padding: 4px 0" v-for="(item, index) in imageList" :key="index">
            <img v-if="getDataTable.suolueFileId" width="100%" :src="baseurlid + getDataTable.suolueFileId" alt />
            <img v-else width="100%" :src="baseurlid + getDataTable.suolueFileId" alt />
            <img width="100%" v-if="!getDataTable.suolueFileId" src="https://nfzjszlb.jst.zj.gov.cn/tyzcpt/api/upload/oss/preview?fileId=3e7acb97b640411a9ce06017e7c12964" alt="" />
            <!-- <pdf
                :src="baseurl + pdfData + '?download=0'"
                style="width: 100%; height: 100%"
              ></pdf> -->
            <!-- <iframe v-show="pdfids" class="manual__iframe" :src="'static/web/viewer.html?file=' + encodeURI('https://nfzjszlb.jst.zj.gov.cn/api/upload/oss/preview?fileId='+pdfids)" frameborder="0"></iframe> -->
          </div>
        </div>
      </div>
      <div class="bottom1"  :style="{ fontSize: showEdition ? '14px' : '20px' }">
        <div class="ThreeStyle">
          <div @click="follow" class="left">
            <img style="margin-left: 7px" v-if="!isFollow" width="30" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/20.png" />
            <img style="margin-left: 7px" v-if="isFollow" width="30" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/21.png" />
            <p style="text-align: center; font-size: 14px !important" :style="{ fontSize: showEdition ? '14px' : '20px' }">收藏</p>
          </div>
          <div class="btn" style="float: left; width: 80%">
            <ul>
              <li v-for="(item, index) in btnData" :key="index" :style="{ background: item.color }" @click="btnDataClick(item)">
                <div style="text-align: center;">
                  <p style="font-size: 14px;">
                    <img v-if="item.icon" :src="item.icon" style="width: 13%" />
                    <span>{{ item.name }}</span>
                  </p>
                  <p style="font-size: 14px">{{ item.content }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </template>
  <script>
  import { Atlas, followSave, followDelete, AtlasThumbsUp, thumbsUpSave, thumbsUpDelete, AtlasCollection, loginJGPT, selectListByIds } from '@/utils/api'
  // import pdf from "vue-pdf";
  export default {
    data() {
      return {
        isFollow: false,
        showBut: true,
        isThumbsUp: false,
        showEdition: false,
        pdfids: '',
        getDataTable: '',
        pdfData: '',
        baseurl: window.g.BaseURL4,
        baseurlid: window.g.OSSPriviewId,
        baseUrl1: window.g.OSSPriview1,
        btnData: [
          {
            name: '为TA点赞',
            color: '#3F8FFC',
            content: '来为图集点个赞吧',
            icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/22.png'
          },
          {
            name: '确定',
            color: '#00B578',
            content: '',
            icon:''
            //                  icon:'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/24.png'
          }
        ],
        imageList: [
          {
            img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png'
          }
          // { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
          // { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
          // { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
          // { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
          // { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
          // { img: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/banner.png' },
        ],
        AtlasData: ''
      }
    },
    components: {
      // pdf,
    },
    methods: {
      btnDataClick: async function (item) {
        switch (item.name) {
          case '确定':
            this.$store.commit('getTJDATAV2', this.AtlasData)
            window.localStorage.setItem('ISTUJI', false)
              this.$router.push({
                path: 'drawingCraftsman'
              })
            break
          case '为TA点赞':
            this.handleDianzan()
            break
          case '取消点赞':
            this.handleDianzan()
            break
        }
      },
      //监管平台登录
      login: async function () {
        // let params = {
        //   username: "admin",
        //   password: "fxg+kwEniSKO/DvG08OPew==",
        // };
        // const res = await loginJGPT(params);
        this.token = window.localStorage.getItem('token')
        this.getData()
        // if(res.data.code == 200){
  
        // }
      },
      handleDianzan: async function () {
        if (this.isThumbsUp) {
          let params = {
            accessCode: '29ff26f660fc47f79c15bff382eeca6d',
  
            id: this.AtlasData.id,
            appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
            userId: window.localStorage.getItem('ISZHUCE')
          }
          const res = await thumbsUpDelete(params)
          if (res.data.code == 200) {
            this.isThumbsUp = !this.isThumbsUp
            this.btnData[0].name = '为TA点赞'
            this.btnData[0].content = '来为图集点个赞吧'
            this.AtlasData.praiseNum = Number(this.AtlasData.praiseNum)
            this.AtlasData.praiseNum -= 1
            this.$toast.success('点赞量-1')
          } else {
            this.$toast.fail('已取消！')
          }
        } else {
          let params = {
            accessCode: '29ff26f660fc47f79c15bff382eeca6d',
            id: this.AtlasData.id,
            appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
            userId: window.localStorage.getItem('ISZHUCE')
          }
          const res = await thumbsUpSave(params)
          if (res.data.code == 200) {
            this.isThumbsUp = !this.isThumbsUp
            this.AtlasData.praiseNum = Number(this.AtlasData.praiseNum)
            this.AtlasData.praiseNum += 1
            this.btnData[0].name = '取消点赞'
            this.btnData[0].content = ''
            this.$toast.success('点赞量+1')
          } else {
            this.$toast.fail('已点赞！')
          }
        }
      },
      async handleG0toPDF(item) {
        let url = ''
        debugger
        if (item.atlasFile.pdfIds) {
          //根据id获取
          // const res = await selectListByIds(item.fileId)
          let url1 = ''
          const res = await selectListByIds(item.atlasFile.pdfIds)
          url1 = this.baseUrl1 + res.data.data[0].path
          // //iphone先这样处理
          // if (ZWJSBridge) {
          //   ZWJSBridge.openLink({
          //     url: url1,
          //   })
          //     .then((res) => { })
          //     .catch((err) => {
          //       window.open(url1)
          //     })
          // }
        } else {
          this.$toast.fail('暂无附件！')
          return
        }
        //跳转至view需要用户手动复制预览1
        //微信小程序需要端内打开
        if (window.sessionStorage.getItem('showBg1') == 'true') {
          this.$router.push({
            path: '/PDFJSViewer',
            query: {
              path: url
            }
          })
        } else {
          //根据id获取
          let url1 = ''
          const res = await selectListByIds(item.atlasFile.pdfIds)
          url1 = this.baseUrl1 + res.data.data[0].path
          //iphone先这样处理
          if (ZWJSBridge) {
            ZWJSBridge.openLink({
              url: url1
            })
              .then((res) => {})
              .catch((err) => {
                window.open(url1)
              })
          }
        }
      },
      //详情
      getData: async function () {
        let params = {
          accessCode: '29ff26f660fc47f79c15bff382eeca6d',
          cityCode: '441300000000',
          id: this.$route.query?.data ? JSON.parse(this.$route.query.data).id : JSON.parse(this.$route.query.data1).atlasId
        }
        const res = await Atlas(params)
        this.AtlasData = res.data.data
        //获取多图上传的图片路径
        // const res1 = await selectListByIds(this.AtlasData.atlasFile.fileIds)
        this.pdfData = res.data.data.pdfUrl
        // let newData = [res.data.data.atlasFile.atlasId,res.data.data.atlasFile.dwgIds,res.data.data.atlasFile.fileIds,res.data.data.atlasFile.pdfIds]
  
        //根据ids请求图片的路径
        //先获取gsa token
        this.getSCTJ()
        this.getDZTJ()
        // this.getUrlData(res.data.data.atlasFile.atlasId)
        // this.getUrlData(res.data.data.atlasFile.dwgIds)
        // this.getUrlData(res.data.data.atlasFile.fileIds)
        try {
          this.pdfids = res.data.data.atlasFile.pdfIds
        } catch (err) {
          console.log(err)
        }
        //      this.$store.commit('getJFTZ',arr)
      },
      //根据ids请求图片的路径
      getUrlData: async function (data) {
        let url = window.g.BaseURL + 'api/upload/selectListByIds?id=' + data
        let me = this
        $.ajax({
          url: url,
          type: 'get',
          dataType: 'json',
          processData: false,
          contentType: false,
          cache: false,
          async: true,
          beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader('Authorization', me.token)
          },
          success: function (result) {
            // loading.close();
            if (result.code == 200) {
              debugger
              this.pdfids = result.data[0].fileId
              console.log(this.pdfids)
            } else {
              me.$toast.fail(result.msg)
            }
          },
          error: function (error) {
            // loading.close();
          }
        })
      },
      getSCTJ: async function (data) {
        let params = {
          accessCode: '29ff26f660fc47f79c15bff382eeca6d',
          appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
          userId: window.localStorage.getItem('ISZHUCE'),
          atlasId: this.AtlasData.id,
          pageNo: 1,
          pageSize: 1000
        }
        const res = await AtlasCollection(params)
        res.data.data.pageList && res.data.data.pageList.length > 0 ? (this.isFollow = true) : (this.isFollow = false)
      },
      getDZTJ: async function (data) {
        let params = {
          accessCode: '6d042fedd4b445769f41673c99511f6f',
          appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
          userId: window.localStorage.getItem('ISZHUCE'),
          id: this.AtlasData.id,
          pageNo: 1,
          pageSize: 1000
        }
        const res = await AtlasThumbsUp(params)
        if (res.data.code == 200) {
          this.isThumbsUp = res.data.data
          if (this.isThumbsUp) {
            // alert(1)
            this.btnData[0].name = '取消点赞'
            this.btnData[0].content = ''
          } else {
            this.btnData[0].name = '为TA点赞'
            this.btnData[0].content = '来为图集点个赞吧'
          }
        }
      },
      follow: async function () {
        if (!this.isFollow) {
          let params = {
            accessCode: '29ff26f660fc47f79c15bff382eeca6d',
            appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
            atlasId: this.AtlasData.id,
            // appKey: "6738b790-69e8-11ec-a673-6805cab640a0",
            userId: window.localStorage.getItem('ISZHUCE')
          }
          const res = await followSave(params)
          if (res.data.data) {
            this.isFollow = !this.isFollow
            this.$toast.success('收藏成功！')
          } else {
            this.$toast.fail('收藏失败！')
          }
        } else {
          let params = {
            accessCode: '29ff26f660fc47f79c15bff382eeca6d',
            id: this.AtlasData.id,
            appKey: '6738b790-69e8-11ec-a673-6805cab640a0',
            userId: window.localStorage.getItem('ISZHUCE')
          }
          const res = await followDelete(params)
          if (res.data.data) {
            this.isFollow = !this.isFollow
            this.$toast.success('取消收藏成功！')
          } else {
            this.$toast.fail('取消收藏失败！')
          }
        }
      }
    },
    mounted: async function () {
      this.getSCTJ()
      this.showEdition = this.$store.state.Edition
      this.showBut = true
      if (this.$route.query.data != undefined) {
        this.login()
        this.getDataTable = JSON.parse(this.$route.query.data)
      } else {
        this.login()
        this.getDataTable = JSON.parse(this.$route.query.data1)
      }
      
    }
  }
  </script>
  <style lang="scss" scoped>
  .FreeAtlasDetails {
    height: 100vh;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
    background: #fff;
    font-size: 14px;
  
    .manual__iframe {
      background-color: #fff !important;
      display: flex;
      flex-direction: column;
      margin-top: 4px;
      height: 50vh;
      width: 97vw;
    }
  
    .top3 {
      height: 90vh;
      overflow: auto;
  
      .top {
        .top1 {
          padding: 10px 20px;
        }
  
        .topBottom {
          display: flex;
          justify-content: space-between;
          margin: 0 10px;
          border-bottom: 1px solid #eee;
          height: 60px;
  
          .left {
            width: 33.3%;
            // margin: 10px 0;
            border-right: 1px solid #eee;
            display: flex;
            flex-direction: column;
            align-items: center;
  
            p {
              text-align: center;
              line-height: 20px;
            }
          }
  
          .middle1 {
            width: 33.3%;
            margin: 10px 0;
            border-right: 1px solid #eee;
  
            p {
              text-align: center;
              line-height: 20px;
            }
          }
  
          .right {
            width: 33.3%;
  
            p {
              text-align: center;
              line-height: 20px;
            }
  
            margin: 10px 0;
          }
        }
      }
  
      .middle {
        width: 100%;
        height: 14px;
        background: #eee;
      }
  
      .bottom2 {
        padding: 20px 6px 10px 6px;
      }
    }
  
    .btn ul {
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
  
    .btn ul li {
      width: 42%;
      background: #3f8ffc;
      border-radius: 6px;
      float: left;
    //   height: 42px;
      margin-left: 3.3%;
      text-align: center;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      padding: 10px 0;
    }
  
    .bottom1 {
      height: 8vh;
      padding: 10px;
      z-index: 99999;
  
      .ThreeStyle {
        display: flex;
        justify-content: space-between;
        align-items: center;
  
        .left {
          width: 12%;
        }
  
        .middle {
          background: cornflowerblue;
          margin: 0px 10px;
          width: 45%;
          text-align: center;
          border-radius: 4px;
          color: #fff;
          padding-bottom: 4px;
        }
  
        .right {
          background: green;
          margin: 0px 10px;
          width: 45%;
          text-align: center;
          border-radius: 4px;
          color: #fff;
          padding-top: 10px;
        }
      }
    }
  }
  </style>
  